<template>
  <div class="search">
    <div class="logo">
      <img src="../../../assets/images/logo.gif" alt="" />
    </div>
    <div class="input">
      <input type="text" placeholder="请输入关键词" />
      <i class="iconfont photo">&#xe600;</i>
      <button>
        <i class="iconfont sousuo">&#xeafe;</i>
      </button>
    </div>
    <div class="shopcar">
      <span class="iconfont">&#xe601;</span>
      <a href="#">我的购物车</a>
      <i>0</i>
    </div>
    <div class="hotwords">
        <ul>
            <li v-for="hotWord in hotWordList" :key="hotWord.id">
              <a href="#">{{hotWord.hotword}}</a>
            </li>
        </ul>
    </div>
    <div class="navItems">
      <ul>
        <li v-for="navItem in navItems" :key="navItem.id"><a href="#">{{navItem.navItem}}</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeSearch',
  data: function () {
    return {
      hotWordList: [
        {id: 1, hotword: '猕猴桃'},
        {id: 2, hotword: '开学季'},
        {id: 3, hotword: '日用家装'},
        {id: 4, hotword: '家装建材'},
        {id: 5, hotword: '低至五折'},
        {id: 6, hotword: '厨卫家装'},
        {id: 7, hotword: '金秋风暴'},
        {id: 8, hotword: '彩蛋一号'}
      ],
      navItems: [
        {id: 1, navItem: '秒杀'},
        {id: 2, navItem: '优惠券'},
        {id: 3, navItem: 'PLUS会员'},
        {id: 4, navItem: '品牌闪购'},
        {id: 5, navItem: '拍卖'},
        {id: 6, navItem: '京东家电'},
        {id: 7, navItem: '京东超市'},
        {id: 8, navItem: '京东国际'}
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
.search {
  position: relative;
  height: 10em;
  padding: 0 12em;

  .logo {
    position: absolute;
    width: 10em;
    height: 10em;
  }

  .logo img {
    width: 100%;
  }

  .input {
    float: left;
    position: absolute;
    width: 40em;
    left: 26%;
    top: 18%;
    border: .2em  solid red;

    input {
      text-indent: 0.8em;
      height: 2.5em;
      width: 30em;
      line-height: 2.5em;
    }

    .photo {
      position: absolute;
      top: 0.4em;
      right: 0em;
      float: left;
      margin-right: 3.5em;
      font-size: 1.5em;
      color: #ccc;
    }

    button {
      position: absolute;
      right: 0;
      width: 4em;
      height: 2.6em;
      background: #DC221D;
      color: #fff;
         cursor pointer
      .sousuo {
        font-size: 1.5em;
        color #fff
      }
    }
  }

  .shopcar {
    float: left;
    position: relative;
    padding: 0 0.6em;
    width: 8em;
    left: 74%;
    top: 18%;
    transform: translateX(-50%);
    border: 1px solid #ccc;
    height: 2.6em;
    line-height: 2.6em;
    overflow hidden
  }

  .shopcar a,.iconfont {
    color: red;
  }
  .shopcar a{
    font-size:.8em
    margin-left:.8em
  }

  .shopcar i {
    z-index -1
    display inline-block
    border-radius .4em
    padding 0 .3em
    color:#fff
    position:absolute
    top: 0em
    left 1.3em
    background red
    font-size:1em
    line-height 1em
    cursor pointer
  }

  .hotwords {
    position absolute
    top 5em
    left 28%
  }
    ul{
      display flex
    }
      li a{
        margin-right 1em
        color #aaa
        font-size .8em
      }
      li:first-child a{
        color red
    }
  .navItems {
    position absolute
    bottom 0
    left 25%
  }
  .navItems ul{
      display flex
      padding 1em 0
    }
    .navItems li a{
        margin-right 2em
        color #aaa
        font-size 1em
      }
    .navItems li:nth-child(-n+2) a{
      font-weight 700
      color red
    }
}
</style>
